<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.xj{
			/*1、绘制区域*/
			width: 24px;
			height: 20px;
			border:1px solid;
			/*2、添加背景图*/
			background-image: url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png');
			/*3、背景图定位（重点：雪碧图原理）*/
			background-position: 0px 46px;
		}
		/*.xj:hover表示鼠标悬停到该元素上*/
		.xj:hover{
			background-position: 0px 22px;
		}
	</style>
</head>
<body>
	<div class="xj"></div>
</body>
</html>